import Snap from "@aibee/snapsvg";
import { STYLE_ENUM } from "./ENUM";

interface IVec2 {
  x: number;
  y: number;
}
const role = { x: 0, y: 0 };

export class SnapTest {
  ctx: Snap.Paper;
  public pathline: any = null;
  public characterTemplate: any = null;
  public rolate: any = null;
  public roleRadar: any = null;
  public roleRadar1: any = null;
  public roleRadar2: any = null;
  public sectorMask: Snap.Paper | undefined;
  public sectorMaskChildren: any[] = [];

  constructor(public id: string) {
    this.ctx = Snap(id);
  }
  public gDemo(svg: Snap.Paper) {
    return svg.g();
  }

  public rectDemo = (
    svg: Snap.Paper,
    x: number,
    y: number,
    width: number,
    height: number,
    rx?: number,
    ry?: number
  ) => {
    return svg.rect(x, y, width, height);
  };
  public svgelement() {
    const g = this.gDemo(this.ctx);
    const main = this.rectDemo(g, 0, 0, 1200, 600);
    main.attr({
      fill: "rgb(124, 174, 70)",
    });
    // 生成球场边框钱
    this.pathline = this.gDemo(this.ctx);

    this.pathline.attr({
      transform: `translate(${0}px,${0}px)`,
    });
    const line = this.rectDemo(this.pathline, 30, 10, 540, 280);
    line.attr({
      fill: "transparent",
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
    this.pathline.line(300, 10, 300, 290).attr({
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
    // 生成中心圆
    this.pathline.circle(300, 150, 40).attr({
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });

    this.pathline.circle(300, 150, 2).attr({
      fill: STYLE_ENUM.stroke,
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });

    // 主场
    // 生成球场的守门员区域
    const thegGoalkeeper = this.pathline.g();
    const thegGoalkeeperline = this.rectDemo(thegGoalkeeper, 30, 120, 30, 70);
    thegGoalkeeperline.attr({
      fill: "transparent",
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
    // 生成主场罚球点
    const theserve = this.pathline.circle(97, 150, 25);
    theserve.attr({
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
    // 主场
    // 进攻区域
    const attack = this.pathline.g();
    const attackline = this.rectDemo(attack, 30, 100, 70, 110);
    attackline.attr({
      fill: "rgb(124, 174, 70)",
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });

    attackline.after(thegGoalkeeperline);

    // 生成宾场罚球点中心
    const theserves = this.pathline.circle(94, 150, 1);
    theserves.attr({
      fill: STYLE_ENUM.stroke,
    });
    // 宾场
    // 生成球场的守门员区域
    const sthegGoalkeeper = this.pathline.g();
    const sthegGoalkeeperline = this.rectDemo(
      sthegGoalkeeper,
      540,
      120,
      30,
      70
    );
    sthegGoalkeeperline.attr({
      fill: "transparent",
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
    // 生成宾场罚球点
    const theserveline = this.pathline.circle(506, 150, 25);
    theserveline.attr({
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
    // 宾场
    // 进攻区域
    const sattack = this.pathline.g();
    const sattackline = this.rectDemo(sattack, 500, 100, 70, 110);
    sattackline.attr({
      fill: "rgb(124, 174, 70)",
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });

    sattackline.after(sthegGoalkeeperline);
    // 生成宾场罚球点中心
    const theservelines = this.pathline.circle(506, 150, 1);
    theservelines.attr({
      fill: STYLE_ENUM.stroke,
    });

    // 生成角色
    this.theball();
  }

  /**
   *
   * 生成角色
   *
   */

  private theball(): void {
    const svg = this.pathline;
    this.characterTemplate = this.gDemo(svg);
    this.rolate = this.gDemo(svg);
    // 生成角色雷达
    this.radar(this.characterTemplate);
    this.rolate.after(this.characterTemplate);
    this.createSectorMask(this.rolate);
    this.rolate.attr({
      style: "transform-origin:60px 0",
      transform: `translate(${0}px,${0}px) rotate(${0}deg)`,
    });
    this.characterTemplate.attr({
      transform: `translate(${0}px,${0}px) rotate(${0}deg)`,
    });
    this.characterTemplate.circle(role.x, role.y, 5).attr({
      fill: "rgb(227, 160, 0)",
      stroke: STYLE_ENUM.stroke,
      strokeWidth: STYLE_ENUM.strokeWidth,
    });
  }

  /**
   *
   * 生成角色雷达
   *
   */
  private radar(svg: any): void {
    this.roleRadar = this.gDemo(svg);
    this.roleRadar1 = this.roleRadar.circle(role.x, role.y, 1).attr({
      fill: "rgba(255, 255, 255,.24)",
      class: "sss ring",
    });

    this.roleRadar2 = this.roleRadar.circle(role.x, role.y, 1).attr({
      fill: "rgba(255, 255, 255,.17)",
      class: "Outerring asd",
    });
  }
  public pitch(role: IVec2, num = 0) {
    this.characterTemplate.attr({
      transform: `translate( ${role.x}, ${role.y}) rotate(${num}deg) scale(1)`,
    });
    this.rolate.attr({
      transform: `translate( ${role.x}, ${role.y}) rotate(${num}deg) scale(1)`,
    });
  }

  /** path说明
   * M x,y其中的x,y表述圆心的坐标
   * L x1,y1标识从x,y到x1,y1的直线。
   * A表示绘画扇形
   * A rx,ry ratation_deg,flag1,flag2,x2,y2
   * 其中rx表示x轴的半径，ry表示y轴的半径
   * ratation_deg 表示绘画的旋转角度，一般为0，不用
   * flag1,flag2表示绘画是按照大，还是按照小，也就是按照顺时针还是逆时针来进行绘画
   * x2,y2和x,y联成的直线为开始线，按照顺时针或者逆时针进行绘画，当和x,y和x1,y1连成的直线为终结线，绘画结束。
   * z表示绘画的路径要闭合，同时file="none"
   */
  createSectorMask(svg: Snap.Paper): void {
    this.sectorMask = this.gDemo(svg);
    const sectorMask1 = this.gDemo(this.sectorMask);
    sectorMask1
      .path(`M ${role.x} ${role.y} l-51 -19 a 120 100 0 0 0 0 38`)
      .attr({
        fill: "rgba(8, 38, 11, 0.25)",
        transform: "translate(0px,0px)",
      });
    const sectorMask2 = this.gDemo(this.sectorMask);
    sectorMask2
      .path(`M ${role.x} ${role.y} l-82 -30 a 120 100 0 0 0 0 60`)
      .attr({
        fill: "rgba(8, 38, 11, 0.25)",
        transform: "translate(0px,0px)",
      });
    const sectorMask3 = this.gDemo(this.sectorMask);
    sectorMask3
      .path(`M ${role.x} ${role.y} l-110 -40 a 120 100 0 0 0 0 80`)
      .attr({
        fill: "rgba(8, 38, 11, 0.3)",
        transform: "translate(0px,0px)",
      });
    this.sectorMaskChildren.push(sectorMask1, sectorMask2, sectorMask3);
  }
}
